<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="Vue.js"></script>
		<style type="text/css">
			*{
				margin :0;
				padding:0;
			}
			html,body{
				height:100%;
				width:100%;
			}
			#box{
				width:280px;
				height:300px;
				margin:50px auto;
				padding:20px;
				border:2px solid black;
				background:linear-gradient(red,yellow);
			}
			p{
				height:60px;
				line-height:60px;
			}
			h2{
				height:60px;
				line-height:60px;
				background-color:black;
				color:white;
				text-align:center;
			}
			input{
				text-align:center;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<h2>
				ShopCar
			</h2>
			<p>
				单价：<input type="text" v-model="price"> 元
			</p>
			<hr>
			<p>
				数量：<input type="text" v-model="number"> 件
			</p>
			<hr>
			<p>
				watch总额：<span>{{sum}} 元</span>
			</p>
			<hr>
			<p>
				computed总额：<span>{{computedSum}} 元</span>
			</p>
			<hr>
		</div>
		
		<script>
			/*
			 计算属性=复杂逻辑
			   -->v-model:数据双向绑定
			 （3），计算属性 VS watch
			 （4），计算 setter
			 */
			var vm = new Vue({
				el:"#box",
				data:{
					name:"wuhao",
					price:100,
					number:0,
					sum:0
				},
				computed:{
					computedSum:function(){
						return this.price*this.number;
					}
				},
				watch:{
					price:function(newvalue){
						this.sum = newvalue*this.number;
					},
					number:function(newvalue){
						this.sum = this.price*newvalue;
					}
				}
			})
		</script>
	</body>
</html>
